class Mask {
	//需要操作的元素
	constructor(newSmallBox, newMask, newBigBox) {
		this.oSmallBox = newSmallBox;
		this.oMask = newMask;
		this.oBigBox = newBigBox;
	}
	onmouseover() {
		let that = this;
		//鼠标放入显示mask和bigBox
		this.oSmallBox.onmouseover=function() {
			that.oMask.style.display = "block";
			that.oBigBox.style.display = "block";
		}
	}

	onmouseout() {
		let that = this;
		//鼠标移出隐藏mask和bigBox
		this.oSmallBox.onmouseout = function() {
			that.oMask.style.display = "none";
			that.oBigBox.style.display = "none";
		}
	}

	onmousemove() {
		let that = this;
		this.oSmallBox.onmousemove = function(evt) {
			let e = evt || evten;

			//获取小图位置赋值
			let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
			let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;

			//小图左边距
			if (left < 0) {
				left = 0;
			}
			//小图上边距
			if (top < 0) {
				top = 0;
			}
			//小图右边距
			let maxLeft = that.oSmallBox.offsetWidth - that.oMask.offsetWidth;
			if (left > maxLeft) {
				left = maxLeft;
			}
			//小图下边距
			let maxTop = that.oSmallBox.offsetHeight - that.oMask.offsetHeight;
			if (top > maxTop) {
				top = maxTop;
			}
			//等比例放大
			let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
			let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;
			//映射到放大镜上
			that.oBigBox.style.backgroundPositionX = -x + "px";
			that.oBigBox.style.backgroundPositionY = -y + "px";


			//获取小图位置赋值
			that.oMask.style.left = left + "px";
			that.oMask.style.top = top + "px";
		}

	}

}
